<template>
	<view class="page_bg">
		<uv-navbar title="仓库管理" :autoBack="true" :placeholder="true" bgColor="rgba(0,0,0,0)">
			<template v-slot:right>
				<view class="uv-nav-slot" @click="add" style="font-size: 14px;">
					{{$t('添加')}}
				</view>
			</template>
		</uv-navbar>

		<uv-sticky>
			<view class="place_site">
				<view class="name">
					{{$t('当前仓库')}}：
				</view>
				<view class="text">
					{{ w_name }}
				</view>
				<!-- <image class="ico" src="/static/img/ico_line5.png" mode="widthFix"></image> -->
			</view>
		</uv-sticky>

		<view class="place_list">
			<div class="center w-full py-50" v-if="list.length == 0">
				<u-empty text="暂无数据" textSize="28rpx" iconSize="100rpx"></u-empty>
			</div>
			<view class="place_item" v-for="(item, index) in list" :key="index" style="position: relative;">
				<view style="width: 50rpx;height: 50rpx;font-size: 36rpx;position: absolute; top: 15rpx; left: 90%;"
					@click="del(item.id)"></view>

				<view class="title">
					<image class="ico" src="/static/img/ico_3.png" mode="widthFix"></image>
					<view class="name">
						{{ lang == 'zh' ? item.name : item.name_ru }}
					</view>
					<uv-icon @click="del(item.id)" name="more-dot-fill" color="#fff" size="40rpx"></uv-icon>
				</view>
				<view class="place_info" @click="goods(w_id, item.id)">
					<view class="item">
						<view class="name">
							{{$t('库存数量')}}
						</view>
						<view class="text">
							{{ item.number }}
						</view>
					</view>
					<view class="item">
						<view class="name">
							{{$t('库存重量')}}（KG)
						</view>
						<view class="text">
							{{ item.weight }}
						</view>
					</view>
					<view class="item">
						<view class="name">
							{{$t('库存体积')}}（m³)
						</view>
						<view class="text">
							{{ item.volume }}
						</view>
					</view>
				</view>
			</view>
		</view>

		<u-popup :show="show" @close="close" @open="open" mode="center" style="z-index: 9990;" round="30rpx">
			<view style="width: 600rpx; position: relative;" class="p-30">
				<view style="width: 50rpx;font-size: 36rpx;position: absolute; top: 30rpx; right:2%"
					@click="hidePopup()">
					<image src="/static/icon/close.png" class="w-30 h-30" mode="widthFix"></image>
				</view>
				<view style="width: 85%;font-weight: bold;font-size: 18px;">
					{{$t('请输入货位名称')}}</view>
				<view style="height: 120rpx;width: 100%;" class="mt-30">
					<input type="text" v-model="name"
						style="text-align: center; border-radius: 30rpx; margin-top: 15rpx; height: 120rpx; background-color: #eee;" />
				</view>

				<view class="bg-primary center text-white fz26 h-80 rounded-30 mt-30" @click="sub()">
					{{$t('确定')}}
				</view>

			</view>
		</u-popup>

		<!-- <uv-action-sheet 
			ref="actionSheet" 
			:actions="listSheet"
			:safeAreaInsetBottom="true"
			:closeOnClickOverlay="true" 
			:closeOnClickAction="true"
			cancelText="取消"
			@select="selectSheet" 
			@close="closeSheet">
		</uv-action-sheet> -->

	</view>
</template>

<script>
import { storage_del } from '@/api/basic.js'
import { storage_save } from '@/api/basic.js'
import { storage_lists } from '@/api/basic.js'
export default {
	data() {
		return {
			listSheet: [{ name: this.$t('删除') }],

			list: [],
			show: false,
			name: '',

			w_id: 0,
			w_name: '',
			lang: 'zh'
		}
	},
	onLoad(options) {
		this.lang = uni.getStorageSync('lang')
		if (options.id) {
			this.w_id = options.id
			this.w_name = options.name
		}
		this.lists()

	},
	methods: {
		back() {
			// uni.navigateBack()
			this.cback()
		},

		openSheet() {
			this.$refs.actionSheet.open();
		},
		selectSheet(e) {
			console.log('选中该项：', e);
		},
		closeSheet() {
			console.log('关闭');
		},
		add() {
			this.show = true
		},
		close() {
			this.show = false
		},
		open() {

		},
		goods(w_id, storage_id) {
			uni.redirectTo({
			 url: '/pages/cargoList/cargoList?w_id=' + w_id + '&storage_id=' + storage_id + '&w_name=' + this.w_name
			});
			// uni.navigateTo({
			// 	url: '/pages/cargoList/cargoList?w_id=' + w_id + '&storage_id=' + storage_id + '&w_name=' + this.w_name
			// })
		},
		hidePopup() {
			this.show = false
		},
		sub() {
			if (this.name == '') {
				uni.showToast({
					icon: 'none',
					title: '请输入货位名称'
				})
				return false;
			}
			var that = this
			uni.showLoading({
				title: 'loading...',
				mask: true
			})
			storage_save({ user_id: uni.getStorageSync('user_id'), 'w_id': that.w_id, 'name': that.name }).then(res => {
				console.log(res)
				uni.hideLoading()
				that.show = false
				that.name = ''
				if (res.data.code == 200) {
					this.toast('操作成功')
				}
				that.lists()
			})
		},
		lists() {
			var that = this
			storage_lists({ user_id: uni.getStorageSync('user_id'), 'w_id': that.w_id }).then(re => {
				that.list = re.data.data.data
			})
		},
		del(id) {
			var that = this
			uni.showModal({
				title: this.$t('温馨提示'),
				content: this.$t('确认删除吗?'),
				cancelText: this.$t('否'),
				confirmText: this.$t('是'),
				success: res => {
					if (res.confirm) {
						uni.showLoading({
							title: 'loading...'
						})
						storage_del({ id: id }).then(res => {
							console.log(res)
							uni.hideLoading()

							if (res.data.code == 200) {
								uni.showModal({
									content: '操作成功'
								})
								setTimeout(function () {
									that.lists()
								}, 2000)
							}
						})
					}
				}
			})
		},
	}
}
</script>

<style lang="scss">
page {
	background-color: #F6F7FB;
}

.page_bg {
	background: url('/static/img/bg_2.png') no-repeat center top;
	background-size: 100% auto;
	padding-top: 40px;
}

.header {
	font-size: 34rpx;
	height: 100rpx;
	line-height: 100rpx;
	font-weight: bold;
	text-align: center;
	position: relative;
	padding-top: var(--status-bar-height);
	background: #fff;
}

.back {
	position: absolute;
	width: 70rpx;
	height: 70rpx;
	top: 18rpx;
}

.place_list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	background: #fff;
	border-radius: 20rpx;
	margin: 20rpx 0;
	padding: 24rpx 24rpx 0;

	.place_item {
		background: #3885AB;
		width: 340rpx;
		padding: 0 10rpx 10rpx 10rpx;
		border-radius: 6rpx;
		margin-bottom: 20rpx;

		.place_info {
			background: #fff;
			border-radius: 6rpx;
			padding: 16rpx;

			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.name {
					color: #8C8C8C;
					font-size: 20rpx;
					line-height: 40rpx;
				}

				.text {
					color: #8C8C8C;
					font-size: 20rpx;
					line-height: 40rpx;
					font-weight: bold;
				}
			}
		}

		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 72rpx;

			.ico {
				flex-shrink: 0;
				width: 40rpx;
				margin-right: 10rpx;
			}

			.name {
				width: 100%;
				color: #fff;
				font-size: 26rpx;
			}
		}
	}
}

.place_site {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #fff;
	padding: 20rpx 30rpx;
	border-radius: 0 0 20rpx 20rpx;
	box-shadow: 0 6rpx 6rpx rgba(0, 0, 0, 0.04);

	.name {
		flex-shrink: 0;
		color: #666;
		font-size: 28rpx;
		line-height: 40rpx;
	}

	.text {
		width: 100%;
		color: #222;
		font-size: 28rpx;
		line-height: 40rpx;
	}

	.ico {
		flex-shrink: 0;
		width: 30rpx;
	}
}

.navbar_right {
	color: #278AFF;
	font-size: 24rpx;
	line-height: 40rpx;
}

.footer_none {
	width: 100%;
	height: 210rpx;
}

.footer_btn {
	position: fixed;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 9;
	background: #fff;
	padding: 30rpx 30rpx 60rpx;
	box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);

	.btn {
		width: 100%;
		height: 90rpx;
		border-radius: 50rpx;
		background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
		color: #fff;
		text-align: center;
		line-height: 90rpx;
		font-size: 32rpx;
		font-weight: 600;
	}
}

.footer_btn1 {
	position: fixed;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 9;
	background: #fff;
	padding: 30rpx 0 60rpx;
	box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);

	.btn_red {
		width: 100%;
		height: 110rpx;
		background: #FFB6B6;
		color: #FF1F1F;
		text-align: center;
		line-height: 110rpx;
		font-size: 32rpx;
	}

	.btn_gray {
		width: 100%;
		height: 110rpx;
		background: #C6C6C6;
		color: #fff;
		text-align: center;
		line-height: 110rpx;
		font-size: 32rpx;
	}
}

.footer_big_btn2 {
	position: fixed;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 9;
	background: #fff;
	padding: 0 0 60rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.btn_red {
		flex-shrink: 0;
		width: 240rpx;
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		color: #fff;
		background: #FF6456;
		font-size: 32rpx;
	}

	.btn_yellow {
		width: 100%;
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		color: #fff;
		background: linear-gradient(90deg, #FF811E 0%, #FFBE7C 100%);
		font-size: 32rpx;
	}
}

.footer_btn2 {
	position: fixed;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 9;
	background: #fff;
	padding: 30rpx 30rpx 60rpx;
	box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);
	display: flex;
	align-items: center;
	justify-content: space-between;

	.btn {
		width: 48%;
		height: 90rpx;
		border-radius: 50rpx;
		background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
		color: #fff;
		text-align: center;
		line-height: 90rpx;
		font-size: 32rpx;
		font-weight: 600;
	}

	.btn1 {
		width: 48%;
		height: 90rpx;
		border-radius: 50rpx;
		background: #fff;
		color: #8C8C8C;
		text-align: center;
		line-height: 90rpx;
		font-size: 32rpx;
		border: 1rpx solid #8C8C8C;
	}

	.btn2 {
		width: 48%;
		height: 90rpx;
		border-radius: 50rpx;
		background: #F7F7F7;
		color: #8C8C8C;
		text-align: center;
		line-height: 90rpx;
		font-size: 32rpx;
	}
}
</style>
